<template>
  <!-- 图表容器，设置宽高 -->
  <div class="chart-container">
    <div
      ref="chartRef"
      class="echarts"
      style="width: 100%; height: 600px"
    ></div>
  </div>
</template>

<script setup>
import { ref, onMounted, watchEffect } from "vue";
import * as echarts from "echarts";

// 定义 ref 用于绑定 DOM 容器
const chartRef = ref(null);
// 声明 ECharts 实例变量
let myChart = null;

// 模拟原始数据（要求无负值）
const rawData = [
  [100, 302, 301, 334, 390, 330, 320], // Direct
  [320, 132, 101, 134, 90, 230, 210], // Mail Ad
  [220, 182, 191, 234, 290, 330, 310], // Affiliate Ad
  [150, 212, 201, 154, 190, 330, 410], // Video Ad
  [820, 832, 901, 934, 1290, 1330, 1320], // Search Engine
];

// 类别名称（与 rawData 索引对应）
const categoryNames = [
  "Direct",
  "Mail Ad",
  "Affiliate Ad",
  "Video Ad",
  "Search Engine",
];

// 地区名称（与 xAxis.data 对应）
const regionNames = ["香港", "克拉精神的理解啊", "中国地区"];

// 计算每日数据总和（用于后续计算百分比）
const totalData = [];
for (let i = 0; i < rawData[0].length; ++i) {
  let sum = 0;
  for (let j = 0; j < rawData.length; ++j) {
    sum += rawData[j][i];
  }
  totalData.push(sum);
}

// 构建 series 配置
const series = categoryNames.map((name, sid) => ({
  name,
  type: "bar",
  stack: "total",
  barWidth: "60%",
  label: {
    show: true,
    // 格式化显示百分比，保留一位小数
    formatter: (params) => `${(params.value * 100).toFixed(1)}%`,
  },
  data: rawData[sid].map((d, did) =>
    // 避免除以 0 导致的异常
    totalData[did] <= 0 ? 0 : d / totalData[did]
  ),
  // 存储原始数值（用于 tooltip 显示）
  rawData: rawData[sid],
}));

// 图表配置项（新增 tooltip 配置）
const option = {
  legend: {
    // 关闭图例选中功能（如需交互可调整）
    selectedMode: false,
  },
  // 新增：tooltip 配置
  tooltip: {
    trigger: "item", // 触发单个柱形的 tooltip
    triggerOn: "mousemove", // 鼠标移动时触发
    backgroundColor: "rgba(255, 255, 255, 0.9)", // 白色背景（半透明）
    borderColor: "#eee", // 灰色边框
    borderWidth: 1,
    padding: 12, // 内边距
    textStyle: { color: "#333" }, // 文字颜色
    // 自定义 tooltip 内容
    formatter: (params) => {
      // 获取当前柱形对应的原始数值（从 series.rawData 中取）
      const originalValue =
        series[params.seriesIndex].rawData[params.dataIndex];
      // 获取当前地区的总数值
      const regionTotal = totalData[params.dataIndex];
      // 格式化百分比（保留 1 位小数）
      const percentage = (params.value * 100).toFixed(1);

      // 组装 tooltip 内容（支持 HTML 格式）
      return `
        <div style="font-weight: 600; margin-bottom: 6px;">${
          regionNames[params.dataIndex]
        }</div>
        <div style="margin-bottom: 4px;">
          <span style="display: inline-block; width: 8px; height: 8px; background: ${
            params.color
          }; margin-right: 6px;"></span>
          ${params.seriesName}
        </div>
        <div>原始数值：${originalValue}</div>
        <div>地区总计：${regionTotal}</div>
        <div>占比：${percentage}%</div>
      `;
    },
    // 禁用轴指示器（避免影响视觉，可选）
    axisPointer: {
      type: "none",
    },
  },
  yAxis: {
    type: "value",
    // 补充：Y 轴显示百分比标签（与柱形标签一致）
    axisLabel: {
      formatter: (value) => `${(value * 100).toFixed(1)}%`,
    },
  },
  xAxis: {
    type: "category",
    data: regionNames,
    axisLabel: {
      width: 80,
      overflow: "break",
      ellipsis: "...",
      align: "center",
      // 手动拆分长文字：按3-4个字符拆分一次
      formatter: (value) => {
        if (value === "克拉精神的理解啊") {
          return "克拉精神\n的理解啊"; // 手动插入换行符
        }
        return value; // 其他标签保持原样
      },
    },
  },
  series,
};

onMounted(() => {
  // 确保 DOM 渲染完成后初始化 ECharts
  if (chartRef.value) {
    myChart = echarts.init(chartRef.value);
    // 设置配置项渲染图表
    myChart.setOption(option);
  }
});

// 监听容器尺寸变化，自动resize图表（可选，根据需求决定是否保留）
watchEffect(() => {
  if (myChart) {
    myChart.resize();
  }
});
</script>

<style scoped>
.chart-container {
  width: 300px;
  padding: 20px;
}
</style>
